<template>
    <div>{{msg}}
      <ul>
        <li v-for="(item,key) in list">
          <!--动态路由-->
         <!-- <router-link :to="'/newsDetail/'+item.aid">{{item.title}}</router-link>-->
          <router-link :to="'/newsDetail?id='+item.aid">{{item.title}}</router-link>
        </li>
      </ul>
    </div>

</template>

<script>
    //使用vuex  1.引入
    import store from "../../vuex/store";
    export default {
        name: "HomeNews",
        data(){
            return{
                msg:"国内新闻组建",
                list:[]
            }
        },
        store,
        methods:{
            requestData(aid){
                //jsonp请求的话  后台api接口要支持jsonp
                var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
                this.$http.get(api).then((response)=>{
                    console.log("====",response);
                    this.list=response.body.result;
                    //数据放在store里面
                    this.$store.commit('addList',response.body.result);
                },(err)=>{
                    console.log("网络请求异常",err)
                })
            },
        },
        //主注意和 methods同级
        mounted(){
            //判断 store里面有没有数据
            var listData=this.$store.state.list;
            console.log("==News=",listData.length);
            if(listData.length>0){
                this.list=listData;
            }else{
                this.requestData();
            }
        }
    }
</script>

<style scoped>

</style>
